<template>
  <div>
    <search-table
      :url="url"
      ref="searchtable"
      :columns="columns"
      :form="form"
      :xLength="2200"
      :defaultParams="defaultParams"
    >
      <template slot="searchForm">
        <a-form layout="inline" :form="form">
          <a-form-item label="所属店铺">
            <a-select
              style="width: 200px"
              :options="shopCategoryOptions"
              allowClear
              v-decorator="['shopCategory', {  initialValue: '0' }]"
              placeholder="选择所属店铺"
            />
          </a-form-item>
          <a-form-item label="海报名称">
            <a-input
              style="width: 200px"
              v-decorator="['name']"
              placeholder="输入海报名称"
            >
            </a-input>
          </a-form-item>
          <a-form-item label="分类">
            <a-select
              style="width: 200px"
              allowClear
              @change="firstCategoryChange"
              :options="firstCategoryOptions"
              v-decorator="['firstPosterCategoryId']"
              placeholder="选择海报一级分类"
            />
          </a-form-item>
          <a-form-item label="">
            <a-select
              style="width: 200px"
              allowClear
              :options="secondCategoryOptions"
              v-decorator="['secondPosterCategoryId']"
              placeholder="选择海报二级分类"
            />
          </a-form-item>
          <a-form-item label="是否启用">
            <a-select
              style="width: 150px"
              :options="isUsedOptions"
              v-decorator="['isUsed']"
              placeholder="选择是否启用"
            />
          </a-form-item>
          <a-form-item label="状态">
            <a-select
              style="width: 150px"
              :options="statusOptions"
              v-decorator="['status']"
              placeholder="选择海报状态"
            />
          </a-form-item>
          <a-form-item label="创建日期">
            <fast-range-picker v-decorator="['createStartTime-createEndTime']">
            </fast-range-picker>
          </a-form-item>
          <a-form-item label="创建人姓名">
            <a-input
              style="width: 200px"
              v-decorator="['userName']"
              placeholder="输入创建人姓名"
            >
            </a-input>
          </a-form-item>
          <a-form-item label="创建人账号">
            <a-input
              style="width: 200px"
              v-decorator="['userPhone']"
              placeholder="输入创建人账号"
            >
            </a-input>
          </a-form-item>
        </a-form>
      </template>
      <template slot="oprationRow">
        <a-button type="primary" icon="plus" @click="newPoster()"
          >新增海报</a-button
        >
        <a-button
          type="danger"
          @click="deleteRows($refs.searchtable.selectedRowKeys)"
          >批量删除</a-button
        >
      </template>
      <template slot="tableOperation" slot-scope="{ record }">
        <a-space>
          <a
            href="javascript:;"
            class="text-primary pointer"
            @click="operationPoster(record.id, record, 'preview')"
            >预览
          </a>
          <a
            href="javascript:;"
            class="text-primary pointer"
            @click="operationPoster(record.id, record, 'update')"
            >编辑</a
          >
          <a
            href="javascript:;"
            class="text-primary pointer"
            @click="operationPoster(record.id, record, 'check')"
            >查看
          </a>
          <a
            href="javascript:;"
            class="text-primary text-danger"
            @click="deleteRows([record.id])"
          >
            删除
          </a>
        </a-space>
      </template>
    </search-table>
    <AddPoster
      ref="addPoster"
      :posterInfo="posterInfo"
      :firstCategoryList="firstCategoryOptions"
      :secondCategoryInfo="secondCategoryInfo"
      :operation="operation"
      @confirm="handleAdd"
      @cancel="handleCancel"
    >
    </AddPoster>
    <PosterPreview
      :visible="isPreview"
      :posterData="posterInfo"
      @cancel="isPreview = false"
    >
    </PosterPreview>
  </div>
</template>

<script>
import AddPoster from "./components/AddPoster";
import PosterPreview from "./components/PosterPreview";
export default {
  name: "GalleryPosterUpload",
  components: {
    AddPoster,
    PosterPreview,
  },
  data() {
    return {
      url: "goldenhome/gh/poster_admin/poster/page",
      form: this.$form.createForm(this, { name: "table_search" }),
      columns: [
        {
          title: "海报缩略图",
          dataIndex: "imgsUrl",
          key: "imgsUrl",
          align: "center",
          width: "120px",
          customRender: (text, row) => {
            return <table-img src={text} />;
          },
        },
        {
          title: "海报名称",
          dataIndex: "name",
          key: "name",
          align: "center",
          width: "120px",
        },
        {
          title: "海报一级分类",
          dataIndex: "firstPosterCategoryName",
          key: "firstPosterCategoryName",
          align: "center",
          width: "120px",
        },
        {
          title: "海报二级分类",
          dataIndex: "secondPosterCategoryName",
          key: "secondPosterCategoryName",
          align: "center",
          width: "120px",
        },
        {
          title: "海报排序",
          dataIndex: "sort",
          key: "sort",
          align: "center",
          width: "100px",
        },
        {
          title: "创建时间",
          dataIndex: "createDate",
          key: "createDate",
          align: "center",
          width: "120px",
        },
        {
          title: "最后编辑时间",
          dataIndex: "updateDate",
          key: "updateDate",
          align: "center",
          width: "120px",
        },
        {
          title: "创建人",
          dataIndex: "userName",
          key: "userName",
          width: "120px",
          align: "center",
        },
        {
          title: "创建人账号",
          dataIndex: "userPhone",
          key: "userPhone",
          width: "130px",
          align: "center",
        },
        {
          title: "所属机构",
          dataIndex: "orgName",
          key: "orgName",
          width: "120px",
          align: "center",
        },
        {
          title: "所属店铺",
          dataIndex: "shopName",
          key: "shopName",
          width: "120px",
          align: "center",
        },
        {
          title: "有效期",
          dataIndex: "edStart-edEnd",
          key: "edStart-edEnd",
          width: "350px",
          align: "center",
          customRender: (text, record) => {
            return `${record.edStart}至${record.edEnd}`;
          },
        },
        {
          title: "状态",
          dataIndex: "status",
          key: "status",
          width: "100px",
          align: "center",
          customRender: (text, record) => {
            if (text == 1) {
              return "未生效";
            } else if (text == 2) {
              return "生效中";
            } else {
              return <span style="color: red">{"已过期"}</span>;
            }
          },
        },
        {
          title: "是否启用",
          dataIndex: "isUsed",
          align: "center",
          width: "100px",
          customRender: (text, record) => {
            return (
              <a-switch
                checked={text == 1}
                onChange={() => this.onChangeShow(record, text)}
              />
            );
          },
        },
        {
          title: "操作",
          dataIndex: "operation",
          fixed: "right",
          scopedSlots: { customRender: "operation" },
        },
      ],
      shopCategoryOptions: [
        { label: "本店海报", value: "0" },
        { label: "其他店海报", value: "1" },
      ],
      firstCategoryOptions: [],
      secondCategoryInfo: {},
      secondCategoryOptions: [],
      isUsedOptions: [
        // {label: '全部', value: '0'},
        { label: "是", value: "1" },
        { label: "否", value: "0" },
      ],
      statusOptions: [
        { label: "未生效", value: "1" },
        { label: "生效中", value: "2" },
        { label: "已过期", value: "3" },
      ],
      posterId: "",
      posterInfo: {},
      operation: "add",
      isPreview: false,
      defaultParams: {
        source: 1,
      },
    };
  },
  created() {
    this.getCategoryList();
  },
  mounted() {},
  methods: {
    //一级分类改变
    firstCategoryChange(value) {
      this.form.resetFields("secondPosterCategory");
      if (
        !this.secondCategoryInfo[value] ||
        this.secondCategoryInfo[value].length == 0
      ) {
        //没有二级分类 把二级分类下拉选项数组置空
        this.secondCategoryOptions = [];
        return;
      }
      this.secondCategoryOptions = this.secondCategoryInfo[value].map(
        (item) => {
          //获取当前选择一级分类下二级分类
          return {
            label: item.name,
            value: item.id,
          };
        }
      );
    },
    // 获取分类
    async getCategoryList() {
      const res = await this.$get(
        "goldenhome/gh/poster_admin/poster/category/list",
        {
          source: 1, //海报来源 1上传海报，2模板海报
        }
      );
      if (res && res.returnCode == 1000) {
        this.firstCategoryOptions = res.dataInfo.map((item) => {
          return {
            label: item.name,
            value: item.id,
          };
        });
        res.dataInfo.forEach((item) => {
          this.secondCategoryInfo[item.id] = item.children;
        });
      }
    },
    // update 编辑海报接口
    async posterUpdateRequest(params) {
      const res = await this.$post(
        "goldenhome/gh/poster_/admin/poster/update",
        params
      );
      if (res && res.returnCode == 1000) {
        this.$refs.searchtable.refreshTable();
      }
    },
    async posterInfoRequest(params) {
      const res = await this.$get(
        "goldenhome/gh/poster_/admin/poster/id",
        params
      );
      if (res && res.returnCode == 1000) {
        return res.dataInfo;
      } else {
        return {};
      }
    },
    onChangeShow(record, text) {
      let params = {
        id: record.id,
        isUsed: text == "1" ? "0" : "1",
      };
      this.posterUpdateRequest(params);
    },
    // 新增海报
    newPoster() {
      this.operation = "add";
      this.$refs.addPoster.visible = true;
    },
    // 新增海报回调
    handleAdd() {
      this.$refs.addPoster.visible = false;
      this.$refs.searchtable.refreshTable();
    },
    handleCancel() {
      this.$refs.addPoster.visible = false;
    },
    // 操作
    async operationPoster(id, record, type) {
      this.operation = type;
      this.posterId = id;
      this.posterInfo = await this.posterInfoRequest({ id });
      this.posterInfo = {
        ...this.posterInfo,
        firstPosterCategoryName: record.firstPosterCategoryName,
        secondPosterCategoryName: record.secondPosterCategoryName,
      };
      console.log(this.posterInfo);
      if (type == "preview") return (this.isPreview = true);
      this.$refs.addPoster.visible = true;
    },
    // 单个删除
    deleteRows(ids) {
      if (!ids || ids.length == 0)
        return this.$message.warn("请先选择一项后再进行操作");
      this.$confirm({
        title: "删除提示",
        content: "删除操作不可恢复，请确认是否删除？",
        okText: "确认删除",
        cancelText: "取消",
        onOk: () => {
          this.$post("goldenhome/gh/poster_/admin/poster/delete", ids).then(
            (res) => {
              if (res && res.returnCode == 1000) {
                this.$message.success("删除成功");
                this.$refs.searchtable.refreshTable();
              }
            }
          );
        },
      });
    },
  },
};
</script>

<style scoped lang="less">
</style>
